<script setup>
// import { ref } from "vue";
import Blogpost from "@/views/Blogpost.vue";
import axios from 'axios';
import { ElLoading } from 'element-plus';
import querystring from 'querystring'
import {computed, ref} from "vue";
const theKey = ref(
    []
)
const theValue = ref(
    []
)
const formattedContent = computed(() => {
      return theKey.value.map((item, index) => `${item}: ${theValue.value[index]}`);
    })
let dialogVisible1 = ref(false);
const blogs = ref([
  {
    id: 1,
    title: "智能病历生成系统",
    content: "请简要描述你的病情,请尽可能完整的提供你的症状，并告诉我们你是否有相关的既往病症或药物过敏",
  },
  {
    id: 2,
    title: "感谢使用",
    content: "本系统使用chatglm进行病历自动生成，您的个人信息不会被用于其他目的",
  },
]);
const initialBlogForm = {
  title: "",
  content: "",
  doctor_id: "",
}
const blogForm = ref({ ...initialBlogForm });
const handleSubmit = async() => {
   //显示加载界面 element-plus
  const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      }
      )
  console.log(blogForm.value.content)
  console.log(blogForm.value.doctor_id)
  // 在这里传给后端数据
  await axios.post('http://localhost:8000/medic/generate/1/', querystring.stringify({
        message: blogForm.value.content,
        doctor_id: blogForm.value.doctor
     }))
      // .then(res => {
      //   const response =  axios.get('http://localhost:8000/medic/generate/1/');
      //   const theMessage = response.my_record;
      //      for (const key in theMessage)
      //      {
      //        if (res.hasOwnProperty(key)) {
      //              theKey.value.push(key)
      //              theValue.value.push(res[key])
      //        }
      //      }
      //    }
     //)

  //生成结果显示到弹窗上
  loadingInstance.close
  dialogVisible1.value = true
};
</script>

<template>
  <div class="container">

    <header class="header">
    </header>

    <div class="content">
      <div class="blog-container">
        <Blogpost v-for="blog in blogs" :key="blog.id" v-bind="blog" />
      </div>

      <form class="form">
        <div class="form-group">
          <label for="content">病情描述</label>
          <textarea
            id="content"
            cols="30"
            rows="10"
            v-model="blogForm.content"
            class="description-text"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="doctor-select">医生选择</label>
          <el-select v-model="blogForm.doctor" placeholder="请选择医生" class="select-doctor">
            <el-option label="李医生" value="李医生"></el-option>
            <el-option label="王医生" value="王医生"></el-option>
            <el-option label="何医生" value="何医生"></el-option>
          </el-select>
        </div>
          <el-button type="primary" class="submit-button" @click="handleSubmit">提交</el-button>
      </form>
    </div>
  </div>
  <el-dialog title="生成结果" v-model="dialogVisible1" width="50%">
      <div v-for="(item, index) in formattedContent" :key="index">
        <textarea :value="item" readonly></textarea>
      </div>
        <template #footer>
        <span class = "dialog-footer">
          <el-button @click="dialogVisible1 = false">好的</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<style scoped>
.container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  width: 100%;
  max-width: 800px;
  margin-left: 150px;
}

.blog-container {
  margin-bottom: 20px;
  margin-left: 190px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 100px;
}

.form-group {
  margin-bottom: 40px; /* 增加表单元素之间的间距 */
  width: 100%;
  margin-left: 100px;
}

.description-text {
  width: 100%;
  box-sizing: border-box;
  margin: 20px;
}

.select-doctor {
  width: 100%;
  box-sizing: border-box;
  margin: 20px;

}

.submit-button {
  align-self: center;
  margin-left:200px;
}
</style>
